<template>
  <!-- <vui-icon class="fold-unfold" :icon="collapse ? 'menu-unfold-line' : 'menu-fold-line'" @click="toggleCollapse" /> -->
  <div class="flex items-center h-10" @click="toggleCollapse">
    <span class="w-4 mr-1" :class="[collapse ? 'rotateY-180' : '']"><img class="block w-full" src="./icon.png" /></span>
    <span v-if="!collapse">{{ translateTitle('Base.baseAdmin.收起') }}</span>
  </div>
</template>

<script>
  import { computed, defineComponent } from 'vue'
  import { useStore } from 'vuex'
  import { translateTitle } from '@/utils/i18n'
  export default defineComponent({
    name: 'VuiFold',
    setup() {
      const store = useStore()

      return {
        collapse: computed(() => store.getters['settings/collapse']),
        toggleCollapse: () => store.dispatch('settings/toggleCollapse'),
        translateTitle,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .fold-unfold {
    cursor: pointer;
  }
  .rotateY-180 {
    transform: rotateY(180deg);
  }
</style>
